<template>
  <div class="c-fs26 c-fc-xblack  c-mt20">
    <audio
      :id="'ancyaudio'+number"
      preload="auto"
      @error="ancyPlayAudioError"
      @ended="ancyPlayAudioEnd"
      @onPlayTimeChange="ancyOnPlayTimeChange"
      :curPlayTime="ancyaudioPlayTime"
      class="c-pf c-p-l-100"
    ></audio>
    <div class="c-clearfix">
      <div class="c-inlineblack fl c-ws-n c-lh44 c-fc-sblack c-fs26">答案解析：</div>
      <div class="c-wb-ba copyNot imgInlineb c-lh44 c-fc-xblack" v-html="questionInfo.analysis"></div>
    </div>
    <div>
      <!-- 视频解析 -->
      <section v-show="questionInfo.analysisRtype==1&&questionInfo.analysisRurl!=''&&questionInfo.analysisRurl" class="c-hh360 c-p c-mt14">
        <div :id="'ancyVideoIntroParent'+number" class="c-w100-im ancyVideoIntroParent"></div>
        <div v-show="!ancyPlaying" class="c-pa c-p-l0 c-p-t0 c-p-r0 c-h c-flex-row c-aligni-center c-justify-center c-pz99 c-bg-black" @click="VideoplayAncy">
          <span class="iconfont c-fc-white c-fs100">&#xe869;</span>
        </div>
        <div class="c-p-l0 c-pa c-ph16 c-p-t0 c-w100 c-h c-pz99" v-if="questionInfo.analysisAssetStatus==-1">
          <div class="c-br8 c-translucent-balck60 c-w100 c-h">
            <div class="iconfont c-fc-white c-fs108 c-textAlign-c c-pt100">&#xe963;</div>
            <div class="c-fs24 c-fc-f2 c-textAlign-c">该视频已被管理员删除，如有疑问请咨询客服</div>
          </div>
        </div>
      </section>
      <!-- 音频解析 -->
      <section v-show="questionInfo.analysisRtype==2&&questionInfo.analysisRurl!=''&&questionInfo.analysisRurl" class="c-mt14">
        <div class="c-bg-xgreen c-flex-row c-aligni-center c-br8 c-ph16 c-p">
          <div class="c-mr30 c-ww54"><img class="c-w100" src="@/assets/i/wap/exam/voice_icon.png" alt=""></div>
          <div class="c-flex-grow1 c-mr48">
            <div class="c-fc-white c-fs20 c-mt14 c-mb10 c-maxw440">{{questionInfo.analysisRname}}</div>
            <vue-slider class="audioPlay" :height="2" :processStyle="processStyle" :railStyle="railStyle" :dotOptions="dotOptions" v-model="ancyaudioPlayTime" tooltip="none" :lazy="true" :max="ancyduration"
              @drag-start="ancydragStart" @dragging="ancydragging" @drag-end="ancydragEnddragEnd" @change="ancyinputChange">
              <template slot="dot">
                <div class="dot-peinner c-ww22 c-hh22 c-brp50"><span class="c-ww22" style="text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"></span></div>
              </template>
            </vue-slider>
            <div class="c-flex-row c-aligni-center c-justify-sb c-fs16 c-fc-white c-mt5 c-pb15">
              <div>{{ancyplaytime}}</div>
              <div>{{ancyplaytotalTime}}</div>
            </div>
          </div>
          <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="ancyshowFirstSpeak" @click="ancyfirstPlay">&#xe8ed;</div>
          <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="!ancyshowLoudspeaker&&!ancyshowFirstSpeak" @click="ancyreplay">&#xe8ed;</div>
          <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="ancyshowLoudspeaker && !ancyshowFirstSpeak" @click="ancypause">&#xe8ef;</div>
          <div v-if="questionInfo.analysisAssetStatus==-1" class="c-flex-row c-aligni-center c-br8 c-ph16 c-pa c-translucent-balck60 c-p-t0 c-pz10 c-p-l0 c-w100 c-h">
            <div class="iconfont c-fc-white c-fs40">&#xe963;</div>
            <div class="c-fs24 c-fc-f2 c-ml16">该音频已被管理员删除，如有疑问请咨询客服</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
// let ancyPlayer = null;
let ancyplayTimeControl = null;
let ancyisCanPlay = false;
import { utilJs } from "@/utils/common.js";
import VueSlider from "vue-slider-component";
import { getXgplayer, destoryPlayer } from "@/utils/xgplayerJs.js";
export default {
  name: "answerAncy",
  components: {
    VueSlider
  },
  props: {
    questionInfo: {
      type: Object,
      default: null
    },
    number: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      showDescAnswer:false,
      ancyshowLoudspeaker: false,
      ancydragFlag: false, //进度拖拽
      ancyaudioPlayTime:0,
      ancyplaytime: '00:00:00',
      ancyplaytotalTime: '00:00:00',
      ancyduration:0,
      showFirstSpeak:false,
      ancyPlaying:false,
      isWeiXin:true,
      ancyPlayer:null,
      progress: "",
      ancyshowFirstSpeak:true,
      processStyle: {
        "background-color": "#fff"
      },
      railStyle: {
        "background": "rgba(255,255,255,0.3)"
      },
      dotOptions: {
        style: {
          border: "1px solid #fff",
        },
      }, //进度条组件样式
    };
  },
  watch: {
  },
  mounted() {
    this.isWeiXin = utilJs.isWeiXin();
    let that = this
    console.log(this.ancyPlayer, 'ancyPlayer')
    if (this.ancyPlayer) {
      destoryPlayer(this.ancyPlayer);
      this.ancyPlayer = null;
      // document.querySelector("#liveVideoIntroParent").innerHTML = "";
    }
    let ancyaudio = document.getElementById("ancyaudio" + this.number);
    if (ancyaudio) {
        ancyaudio.src = '';
    }
    if (that.questionInfo.analysisRurl != '' && that.questionInfo.analysisRtype == 2) {
      // $this.$nextTick(function () {
      ancyaudio.src = that.questionInfo.analysisRurl;
      console.log(ancyaudio)
      document.getElementById('ancyaudio' + this.number).removeEventListener('timeupdate', that.ancyAudioTimeUpdate);
      document.getElementById('ancyaudio' + this.number).removeEventListener('canplay', that.ancyAudioCanPlay);
      document.getElementById('ancyaudio' + this.number).removeEventListener('pause', that.ancyAudiopause);
      document.getElementById('ancyaudio' + this.number).addEventListener('timeupdate', that.ancyAudioTimeUpdate);
      document.getElementById('ancyaudio' + this.number).addEventListener('canplay', that.ancyAudioCanPlay);
      document.getElementById('ancyaudio' + this.number).addEventListener('pause', that.ancyAudiopause);
      // })
    }
    console.log(this.questionInfo.analysisRurl != '' && this.questionInfo.analysisRtype == 1)
    if (this.questionInfo.analysisRurl != '' && this.questionInfo.analysisRtype == 1) {
      this.$nextTick(function () {
        that.initQPlayerAncy()
      })
    }
  },
  methods: {
    ancyAudiopause() {
      this.ancyshowFirstSpeak = true;
    },
    ancyPlayAudioEnd() {
      this.ancyshowLoudspeaker = false;
    },
    ancyOnPlayTimeChange(playTime, allTime) {
      this.ancyaudioPlayTime = playTime;
    },
    ancyPlayAudioError() {},
    ancyfirstPlay() {
      this.ancyshowFirstSpeak = false;
      this.ancyshowLoudspeaker = true;
      // if (player) {
      //   player.pause();
      // }
      console.log(document.getElementsByTagName("audio").length)
      if (document.getElementsByTagName("audio").length > 0) {
        let audioArr = document.getElementsByTagName("audio")
        audioArr.forEach(res => {
            // res.src = ''
            res.pause()
        })
      }
      if (document.getElementsByClassName("ancyVideoIntroParent").length > 0) {
        let videoArr = document.getElementsByTagName("video")
          videoArr.forEach(res => {
              // res.src = ''
              res.pause()
          })
          // document.getElementById('audio').pause();
          this.showFirstSpeak = true
      }
      this.ancyplayRadio();
    },
    ancypause() {
      this.ancyshowFirstSpeak = true
      document.getElementById("ancyaudio" + this.number).pause();
    },
    ancyplayRadio() {
      let audio = document.getElementById("ancyaudio" + this.number);
      let that = this
      if (this.questionInfo.analysisRtype == 2 && this.questionInfo.analysisRurl != '') {
        if (this.isWeiXin) {
          try {
            document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  document.getElementById("ancyaudio" + that.number).play();
                },
                false
              );
              WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
                // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
                document.getElementById("ancyaudio" + that.number).play();
                console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
              });
          } catch (error) {
            // continue regardless of error
          }
        } else {
          audio.load();
          audio.play();
        }
      }
    },
    ancyreplay() {
      this.ancyaudioPlayTime = 0
      document.getElementById('ancyaudio' + this.number).currentTime = this.ancyaudioPlayTime;
      this.ancyshowLoudspeaker = true;
      if (document.getElementsByTagName("audio").length > 0) {
        let audioArr = document.getElementsByTagName("audio")
        audioArr.forEach(res => {
            // res.src = ''
            res.pause()
        })
        this.showFirstSpeak = true
      }
      this.ancyplayRadio();
    },
    //拖动结束，更改播放器当前时间，重新开始循环获取当前时间
    ancydragEnddragEnd() {
      document.getElementById('ancyaudio' + this.number).currentTime = this.ancyaudioPlayTime;
      this.ancydragFlag = false;
      console.log("dragEnd-----------");
    },
    ancydragging() {
      this.ancydragFlag = true;
      clearInterval(ancyplayTimeControl);
      console.log("dragging------");
    },
    ancydragStart() {
      this.ancydragFlag = true;
    },
    ancyinputChange(value) {
      console.log("inputChange-----------");
      if (this.ancydragFlag) {
        this.ancydragFlag = false;
        return;
      }
      document.getElementById('ancyaudio' + this.number).currentTime = this.ancyaudioPlayTime;
    },
    timeToStr(timeSecond) {
      //将秒转化为00:00:00格式
      let hour =
        Math.floor(timeSecond / 3600) >= 10
          ? Math.floor(timeSecond / 3600)
          : "0" + Math.floor(timeSecond / 3600);
      let minute =
        Math.floor((timeSecond % 3600) / 60) >= 10
          ? Math.floor((timeSecond % 3600) / 60)
          : "0" + Math.floor((timeSecond % 3600) / 60);
      let second =
        Math.floor(timeSecond % 60) >= 10
          ? Math.floor(timeSecond % 60)
          : "0" + Math.floor(timeSecond % 60);
      return hour + ":" + minute + ":" + second;
    },
      //开始播放音频
    ancyAudioCanPlay(e) {
      ancyisCanPlay = true;
      this.ancyduration = Math.floor(e.target.duration);
      this.ancyduration = Math.floor(document.getElementById('ancyaudio' + this.number).duration)
      this.ancyplaytotalTime = this.timeToStr(this.ancyduration)
    },
    ancyAudioTimeUpdate() {
      // //如果正在拖动  还不能播放，则不更新时间
      if (this.ancydragFlag && !ancyisCanPlay) {
        return;
      }
      ancyplayTimeControl = setTimeout(() => {
        if (document.getElementById('ancyaudio' + this.number) && Math.floor(document.getElementById('ancyaudio' + this.number).currentTime) > 0) {
          this.ancyaudioPlayTime = Math.floor(document.getElementById('ancyaudio' + this.number).currentTime);
          this.ancyplaytime = this.timeToStr(this.ancyaudioPlayTime)
        }
      }, 200)
    },
    VideoplayAncy() {
      if (document.getElementsByTagName("video").length > 0) {
          let videoArr = document.getElementsByTagName("video")
          console.log(videoArr)
          videoArr.forEach(res => {
              // res.src = ''
              res.pause()
          })
          this.ancyPlayer.pause()
          this.showFirstSpeak = true
      }
      if (this.ancyPlayer && this.questionInfo.analysisRurl) {
        this.ancyPlayer.play()
        this.ancyPlaying = true
      }
    },
    initQPlayerAncy() {
      let videoObj = {
        videoMp4: this.questionInfo.analysisRurl,
        videoM3U8: this.questionInfo.analysisRurl,
        autoplay: false,
        fluid: false,
        isCssFullScreen: true,
        poster: require("../../../../public/i/wap/index/poster.png")
      };
      if (this.questionInfo.analysisRurl && this.questionInfo.analysisRurl != '' && !this.ancyPlayer) {
        console.log(this.questionInfo.analysisRurl, '初始化')
        this.ancyPlayer = getXgplayer("ancyVideoIntroParent" + this.number, videoObj);
        this.ancyPlayer.on('ready', () => {
          // document.querySelector(".xgplayer-start").style.zIndex = 99;
        })
        if (document.querySelector(".xgplayer-start")) {
          document.querySelector(".xgplayer-start").style.zIndex = '99';
        }
        this.ancyPlayer.on("play", () => {
          if (document.getElementsByTagName("video").length > 0) {
              let videoArr = document.getElementsByTagName("video")
              videoArr.forEach((res, index) => {
                  // res.src = ''
                  if (videoArr[index].playerId != 'ancyVideoIntroParent' + this.number + 'TcP') {
                    videoArr[index].pause()
                    // this.ancyPlayer.pause()
                  }
              })
          }
          if (document.getElementsByTagName("audio").length > 0) {
            let audioArr = document.getElementsByTagName("audio")
            audioArr.forEach(res => {
              res.pause()
            })
            this.ancyshowFirstSpeak = true
            // document.getElementById('audio').pause();
          }
        });
      }
    },
  },
  destroyed() {
    if (this.ancyPlayer) {
      destoryPlayer(this.ancyPlayer);
      this.ancyPlayer = null;
      // document.querySelector("#liveVideoIntroParent").innerHTML = "";
    }
  }
};
</script>

<style scoped>
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
.isRight{
  color: #71DB77;
}
.isRightBg{
  background: rgba(113,219,119,0);
}
.isWrong{
  color: #FB806D;
}
.isWrongBg{
  background: rgba(251,128,109,0);
}
#ancyVideoIntroParent {
  width: 100% !important;
}
#ancyVideoIntroParent /deep/ .xgplayer-start{
  z-index: 99;
}
.Analysis img{
  display: block
}
.c-whiteOpcity03{
background: rgba(255,255,255,0.3);
}
.dot-peinner {
  /* text-align: center; */
  /* line-height: 0.8rem; */
  position: relative;
  background: rgba(255,255,255,1);
}
.audioPlay /deep/ .vue-slider-dot {
  width: auto !important;
  height: auto !important;
  /* padding: 5px; */
}
</style>
